<!-- 属性面板 -->
<template>
  <div class="content3">
    <span>属性面板</span>
    <div :class="['attribute-panel',{'is-prohibited':!SlidingIsProhibited}]" >
      <div class="attribute-item" v-for="(item, index) in attributeList" :key="index">
        <div class="attribute-item-left">
          <div><span v-for="(aitem,aindex) in item.name.split('')" :key="aindex">{{ aitem }}</span></div>
          <span class="attribute-item-left-span">：</span>
        </div>
        <!-- 颜色选择器 -->
        <div class="attribute-item-right" v-if="item.isColor">
          <input :type="item.type" v-model="item.value" :placeholder="item.placeholder">
          <span class="color-picker-btn" :style="{'background-color': item.value}" @click="showColorPicker(index, $event)">
          </span>
        </div>
        <!-- 选择框携带选择框的值 -->
        <div class="attribute-item-right" v-else-if="(item.choseBox && item.choseBoxValue != undefined)">
          <input :type="item.type" v-model="item.value" :placeholder="item.placeholder">
          <div>
            {{ item.choseBoxValue }}
            <img src="@/assets/img/arrow-down-double-line.png" alt="" @click="showChoseBox(index,$event)">
          </div>
        </div>
        <!-- 只有选择框 -->
        <div class="attribute-item-right" v-else-if="item.choseBox">
          <input :type="item.type" v-model="item.value" :placeholder="item.placeholder">
          <img src="@/assets/img/arrow-down-double-line.png" alt="" @click="showChoseBox(index,$event)">
        </div>
        <!-- 只有输入框 -->
        <div class="attribute-item-right" v-else>
          <input :type="item.type" v-model="item.value" :placeholder="item.placeholder">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import cssAttribute from './js/cssAttribute.js'
 export default {
   name: 'AttributeView', 
   props:{
    indexV:{
      type: Number,
      default: 1
    },
    colorV:{
      type: String,
      default: ''
    },
    SlidingIsProhibited:{
      type: Boolean,
      default: false
    }
   },
   watch:{
    colorV:{
      handler(newV,oldV){
        if(newV !== oldV){
          this.attributeList[this.indexV].value = newV
        }
      },
      deep: true
    },
    indexV(newV,oldV){
      if(newV !== oldV){
          this.attributeList[newV].value = this.colorV
        }
    }
   },
   data() {
     return {
      //  attributeList: [
      //     {
      //       name:'背景色',
      //       color:'',
      //       type:'text',
      //       placeholder:'请选择背景色',
      //     },
      //     {
      //       name:'字体颜色',
      //       color:'',
      //       type:'text',
      //       placeholder:'请选择字体颜色',
      //     },
      //     {
      //       name:'字体大小',
      //       type:'number',
      //       placeholder:'请输入字体大小',
      //     },
      //     {
      //       name:'边框颜色',
      //       color:'',
      //       type:'text',
      //       placeholder:'请选择边框颜色',
      //     },
      //     {
      //       name:'边框宽度',
      //       type:'number',
      //       placeholder:'请输入边框宽度',
      //     },
      //     {
      //       name:'边框圆角',
      //       type:'number',
      //       placeholder:'请输入边框圆角',
      //     },
      //     {
      //       name:'透明度',
      //       type:'number',
      //       placeholder:'请输入透明度',
      //     },
      //     {
      //       name:'阴影',
      //       type:'number',
      //       placeholder:'请输入阴影',
      //     },
      //     {
      //       name:'内边距',
      //       type:'number',
      //       placeholder:'请输入内边距',
      //     },
      //     {
      //       name:'外边距',
      //       type:'number',
      //       placeholder:'请输入外边距',
      //     },
      //     {
      //       name:'宽度',
      //       type:'number',
      //       placeholder:'请输入宽度',
      //     },
      //     {
      //       name:'高度',
      //       type:'number',
      //       placeholder:'请输入高度',
      //     },
      //     {
      //       name:'左边距',
      //       type:'number',
      //       placeholder:'请输入左边距',
      //     },
      //     {
      //       name:'右边距',
      //       type:'number',
      //       placeholder:'请输入右边距',
      //     },
      //     {
      //       name:'上边距',
      //       type:'number',
      //       placeholder:'请输入上边距',
      //     },
      //     {
      //       name:'下边距',
      //       type:'number',
      //       placeholder:'请输入下边距',
      //     },
      // ],
      attributeList:cssAttribute,
     }
   },
   created(){
    console.log(this.cssAttribute)
   },
   methods: {
    showColorPicker(index,e){
      this.$emit('getClientXClientY', e.clientX, e.clientY,index)
    },
    showChoseBox(index,e){
      //给父组件传参
      this.$emit('showChoseBox', cssAttribute[index],index,e.clientX, e.clientY)
    },
   }
 }
</script>
<style scoped lang="scss">
/* Chrome/Safari */
/* Firefox */
input[type="number"] {
  appearance: textfield;
  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
}
.content3 {
    box-sizing: border-box;
    background-color: #fff;
    height: 100%;
    width: 100%;
    span {
        box-sizing: border-box;
        font-size: 12px;
        padding: 5px 0;
        height: 5%;
    }
    .is-prohibited{
      overflow-y:  auto !important;
    }
    .attribute-panel{
      box-sizing: border-box;
      height: 90%;
      width: 100%;
      overflow: hidden;
      // overflow-y:  auto;
      scrollbar-width: none;  /* Firefox */
      -ms-overflow-style: none;  /* IE/Edge */
      padding: 5px;
      margin-bottom: 10px;
      .attribute-item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        width: 100%;
        padding: 5px;
        .attribute-item-left{
          width: 30%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          div{
            width: 95%;
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
        }
        .attribute-item-right{
          width: 70%;
          border-radius: 2px;
          padding: 5px;
          background-color: #eee;
          display: flex;
          align-items: center;
          justify-content: space-between;
          box-sizing: border-box;
          input{
            background-color: #eee;
            width: 80%;
            border: none;
            outline: none;
            box-sizing: border-box;
            margin-right: 3px;
            font-size: 10px;
          }
          span{
            display: inline-block;
            width: 10px;
            height: 10px;
            padding: 0;
            background-color: #999;
            border: 1px solid #000;
          }
          div{
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 10px;
            img{
              width: 15px;
              height: 15px;
              margin-left: 5px;
            }
          }
          img{
            width: 15px;
            height: 15px;
          }
        }
      }
      @media (max-width: 1130px){
        .attribute-item{
          display: flex;
          flex-direction: column;
          align-items: start;
          width: 100%;
          .attribute-item-left{
            width: 60%;
            display: flex;
            justify-content: space-between;
            align-items: left;
            div{
              width: 95%;
              display: flex;
              justify-content: space-between;
              align-items: center;
            }
            .attribute-item-left-span{
              display: none;
            }
          }
          .attribute-item-right{
            width: 100%;
            border-radius: 2px;
            padding: 5px;
            background-color: #eee;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;
            input{
              background-color: #eee;
              width: 80%;
              border: none;
              outline: none;
              box-sizing: border-box;
              margin-right: 3px;
              font-size: 10px;
            }
            span{
              display: inline-block;
              width: 10px;
              height: 10px;
              padding: 0;
              background-color: #999;
              border: 1px solid #000;
            }
          }
        }
      }
    }
    .attribute-panel::-webkit-scrollbar {
      display: none;  /* Chrome/Safari/Edge */
    }
}
</style>